@import "../../global-connect";

.web-form-designer-drawer {
  .ant-drawer-body {

    #content-labels {
      width: 20px !important;
    }

    .form-validation {
      .ant-form-item-with-help {
        margin-bottom: 0px;
      }

      .has-error, .has-success {
        width: 100%;
      }

      .has-error .ant-form-explain {
        .ix-form.error(@color-error);
        width: 100%;
        top: -27px;
        display: none;
      }
    }

    .setting-form {
      &-row {
        z-index: 10 !important;
        .form-validation;

        .ant-col {
          padding-left: 8px;
        }
      }

      &-cell {

        .form-validation;

        .ant-alert {
          margin-left: 2px;
          margin-top: 2px;
        }

        .ant-switch {
          background-color: #a8a8a8;

          &-checked {
            background-color: @primary-color;
          }

          &-disabled {
            background-color: @font-disabled;
          }
        }

        .ant-form-item {
          margin-right: 0 !important;
        }

        .ant-col {
          margin-bottom: 0;
        }

        z-index: 10 !important;

        .uc_green_big {
          .uc_green;
          height: 36px;
          width: 100px;
          border-radius: 18px;
          font-size: 16px;

          i {
            font-size: 16px;
          }
        }

        .render {
          img {
            width: 40px;
            height: auto;
            margin-right: 12px;
          }

          label {
            font-size: 16px;
            color: @color-highlight;
            font-weight: bold;
          }
        }
      }
    }
  }

  .ant-drawer-close {
    .ix-box.square(36px);
    color: #0d152a;
    background-color: #fafafa;
    border: solid 1px #d8d8d8;
    border-radius: 2px;

    &:hover {
      background-color: @color-button-spec;
      border: solid 1px @color-button-spec;
      color: white;
    }
  }
}

.web-form-row-drawer {
  .ant-drawer-body {
    padding: 0 16px 16px 0;
  }

  .web-form-designer-drawer;

  .ant-drawer-content-wrapper {
    width: 30% !important;
  }
}

.web-form-cell-drawer {
  .ant-drawer-body {
    padding: 0 0 16px 0;
  }

  .web-form-designer-drawer;

  .ant-drawer-content-wrapper {
    width: 56% !important;
  }

  .tool-setting {

    .ant-alert {
      margin-bottom: 3px;
    }

    .ant-tabs-right-content {
      padding-right: 4px;
    }

    .ant-tabs-tab {
      &:hover {
        background-color: @primary-color !important;
        color: yellow !important;
      }

      &-active {
        background-color: @primary-color !important;
        color: white !important;

        &:hover {
          color: yellow !important;
        }
      }

    }
  }

  .radio {
    &-input-3 {
      .ant-radio-wrapper {
        width: 30%;
        line-height: 28px;
        height: 28px;
      }
    }

    &-input-4 {
      .ant-radio-wrapper {
        width: 23%;
        line-height: 28px;
        height: 28px;
      }
    }
  }
}